const webpack = require('webpack');
const globalConfig = require('./src/config.js');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',

  entry: [
    'webpack-dev-server/client?http://0.0.0.0:8080',
    'webpack/hot/dev-server',
    'babel-polyfill',  // 可以使用完整的ES6特性, 大概增加100KB
    // 编译的入口
    './src/index.js',
  ],

  output: {
    // 输出的目录和文件名
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js'
  },

  devServer: {
    inline: false,
    proxy: {
      // 不匹配 '/' 路径 会导致都不匹配的bug
      '!(/#/|**/*.js|**/*.css|**/*.ttf|**/*.jpg|**/*.png|**/*.gif|**/*.ico)': {
        target: globalConfig.api.proxyHost,
        changeOrigin: true,
        secure: false,
        // logLevel: 'debug'
      }
    }
  },
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: ['*', '.js', '.jsx'],
    alias: {
      antdcss: 'antd/dist/antd.min.css'
    },
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          plugins: [
            ['import', [{libraryName: 'antd', style: true}]],
          ],
          cacheDirectory: true,
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', "less-loader"]
      },
      {
        test: /\.(svg|eot|ttf|woff)$/,
        use: ['file-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }
    ]
  },

  plugins: [
    // 生成文件时加上注释
    new webpack.BannerPlugin('This is react admin'),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'production' ? 'false' : 'true')),  // magic globals, 用于打印一些调试的日志, webpack -p时会删除
    }),
    // 生成html文件
    new HtmlWebpackPlugin({
      template: 'index.html',
      title: globalConfig.name,
      // favicon
      favIcon: globalConfig.favicon,
      // 这个属性也是我自己定义的, dev模式下要加载一些额外的js
      devMode: true,
    }),
  ],
};
